<template>
  <div>
    <!-- 顶部导航 -->
    <div class="topbanner">
      <div>
        <ul class="leftli">
          <li>官网</li>
          <li>帮助中心</li>
          <li @click="toUsercenter">个人主页</li>
          <li> <router-link to="/Order">我的订单</router-link> </li>
        </ul>
      </div>
      <div>
        <!-- 登录注册 -->
        <ul class="rightli">
          <li @click="Loginbtn">登录</li>
          <li @click="Register">注册</li>
          <li> <router-link to="/Cart"><img src="../assets/购物车.png"/></router-link> 
          </li>
        </ul>
      </div>
    </div>
    <!-- 中间导航 -->
    <div class="share">
      <!-- Logo和搜索 -->
      <div class="sharelogo">
        <div>低价折扣</div>
        <div>新品推荐</div>
        <div>热卖榜单</div>
        <el-input
          v-model="input"
          @keyup.enter="search"
          placeholder="搜索想要的电脑"
        />
      </div>
      <ul class="history">
        <li>MacBook</li>
        <li>AlineWare外星人</li>
        <li>lenovo</li>
        <li>DELL戴尔</li>
        <li>HP惠普</li>
      </ul>
    </div>
    <!-- 轮播和侧边栏 -->
    <div class="asidezzz">
      <div class="asideli">
        <ul class="asider">
          <li><img class="allimg" src="../assets/全部.png">全部</li>
          <li @click="gochildren('Keyboardview')">键盘</li>
          <li @click="gochildren('Mouseview')">鼠标</li>
          <li @click="gochildren('Graphicsview')"><router-link to="Graphicsview">显卡</router-link> </li>
          <li @click="gochildren('Dissipate')"><router-link to="Dissipate">散热风扇</router-link> </li>
          <li @click="gochildren('Chassis')"><router-link to="Chassis">机箱</router-link> </li>
        </ul>
        <div class="asidertell">
          <router-view></router-view>
        </div>
      </div> 
    </div>
    <!-- 热卖商品 -->
    <div >
      <div class="hot">热卖商品</div>
      <div class="hottem">
        <div @click="goorderway(item)" class="itemhott" v-for="(item,index) in hotitem" :key="index">
          <img :src="item.picture" alt="" srcset="">
          <div>{{item.Commodityname}}</div>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div>
      <div class="footer" style="display:flex;height:100px">
        <div>7天无理由退货</div>
        <div>15天免费换货</div>
        <div>满99包邮</div>
      </div>
    </div>
    <!-- 登录 -->
    <div v-show="isLoginbtn">
      <!-- 接收子组件传值，实现跳转到注册 -->
      <Login @callRegister='callRegister' @Loginright='Loginright'></Login>
    </div>
    <!-- 注册 -->
    <div v-show="isRegister">
      <!-- 接收子组件传值，实现跳转到登录 -->
      <Register @callCancel='callCancel'></Register>
    </div>
    <!-- 个人信息主页面显示 -->
    <Userinformation></Userinformation>
    <!-- 正在加载.... -->
    <div v-show="xixi">
      <Zloading></Zloading>
    </div>
  </div>
</template>

<script>
import server from '../request/index'
import {useRouter} from 'vue-router'
import { onMounted,  ref} from "vue";
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'
import Zloading from '../views/Zloading.vue'
import Userinformation from '../views/Userinformation.vue'
export default {
  components:{
    Login,
    Register,
    Zloading,
    Userinformation
  },
  setup() {
    const router=useRouter()
    // 热卖商品
    const hotitem=ref('')
    // 登录注册组件显示状态
    const isLoginbtn=ref(false)
    const isRegister=ref(false)
    const xixi=ref(false)
    // 搜索商品
    let search = () => {
      console.log('搜索商品');
    };
    let debounce=()=>{
    }
    // 热卖商品点击
    let goorderway=(xixi)=>{
        router.push({
          path:'/Product',
          query:xixi
        })
    }
    // 轮播子路由跳转
    let gochildren=(haha)=>{
      router.push(haha)
    }
    // 跳转到个人主页
    let toUsercenter=()=>{
      router.push('/Usercenter')
    }
    // 热卖商品
    onMounted(()=>{
      server.get('/hot').then((res)=>{
        hotitem.value=res.data
      })
    })
    // 登录
    const Loginbtn=()=>{
      isRegister.value=false
      isLoginbtn.value=!isLoginbtn.value
    }
    // 注册
    const Register=()=>{
      isLoginbtn.value=false
      isRegister.value=!isRegister.value
    }
    const callCancel=()=>{
      Loginbtn()
    }
    const callRegister=()=>{
      Register()
    }
    // 登录成功
    const Loginright=()=>{
      isLoginbtn.value=!isLoginbtn.value
      isRegister.value=false
    }
    return {
      debounce,
      search,
      gochildren,
      Loginbtn,
      Register,
      hotitem,
      isLoginbtn,
      isRegister,
      callCancel,
      callRegister,
      goorderway,
      Loginright,
      toUsercenter,
      xixi
    };
  },
};
</script>

<style scoped>
/* 顶部导航 */
.topbanner {
  background: #333;
  position: fixed;
  top: 0;
  width: 100%;
  height: 40px;
  z-index: 105;
  color: aliceblue;
  display: flex;
  justify-content: space-between;
}
.topbanner > div {
  width: 35%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.topbanner > :nth-child(2) {
  width: 25%;
}
.leftli,
.rightli {
  display: flex;
  list-style-type: none;
}
.leftli > li,
.rightli > li {
  margin-left: 20px;
  font-size: 12px;
  cursor: pointer;
}
.leftli>:nth-child(4)>a{
  color: white;
  text-decoration: none;
  font-size: 12px;
}
/* 中间导航 */
.share {
  margin-top: 40px;
  width: 90%;
  margin-left: 5%;
}
.sharelogo {
  margin-top: 80px;
  display: flex;
  justify-content: space-between;
}
.sharelogo > div {
  font-size: 18px;
}
.sharelogo > :nth-child(4) {
  font-size: 14px;
  width: 340px;
}
.sharelogo > :nth-child(3) {
  width: 35%;
}
.history {
  display: flex;
  list-style-type: none;
  justify-content: flex-end;
  margin-top: 10px;
}
.history > li {
  margin-left: 14px;
  font-size: 12px;
  color: #666;
}
/* 轮播和侧边栏 */
.asidezzz{
  background-image:url('https://p3.ssl.qhimg.com/t01b1ae7e231ac75328.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.asideli {
  margin-top: 15px;
  width: 90%;
  margin-left: 20%;
  height: 550px;
  display: flex;
}
.asider{
  width: 200px;
  height: 100%;
  background: rgb(51 51 51);
  list-style-type: none;
  color: aliceblue;
  text-align: center;
  
}
.allimg{
    height: 15px;
    vertical-align: -2px;
    width: 15px;
    margin-right: 3px;
}
.asider>:nth-child(1){
  font-size: 16px;
  background: black;
  opacity: 0.8;
}
.asider>li{
  font-size: 14px;
  height: 48px;
  align-items: center;
  line-height: 48px;
  cursor: pointer;
}
.asider>li:hover{
  background: black;
  opacity: 0.8;
}
.asider>li>a{
  color: aliceblue;
  text-decoration: none;
}
.asidertell{
  width: 80%;
  height: 100%;
}
/* 热卖商品 */
.hot{
  font-size: 18px;
  font-weight: 100;
  margin-left: 5%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.hottem{
  display: flex;
  margin-left: 150px;
}
.itemhott{
  margin-left: 30px;
  text-align: center;
}
.itemhott:hover{
  box-shadow: 1px 1px 10px 1px #888888;
}
/* 底部 */
.footer{
  margin-top: 20px;
  display: flex;
  height: 100px;
  justify-content: space-around;
  background: #333;
}
.footer>div{
  margin-top: 20px;
  font-size: 24px;
  color: white;
}
</style>